<template>
  <div class="app-container">
    <cus-wraper>
      <div style="margin-bottom: 10px">
        <el-page-header content="计算结果" @back="goBack"></el-page-header>
      </div>
      <el-row :gutter="20">
        <!--      计算项目信息-->
        <el-col :span="8" :xs="24">
          <el-card class="card-box">
            <div slot="header" class="clearfix">
              <span>计算项目信息</span>
            </div>
            <div>
              <!--              <div class="text-center">-->
              <!--                &lt;!&ndash;              <userAvatar :user="user" />&ndash;&gt;-->
              <!--                {{calProject.name}}-->
              <!--              </div>-->
              <el-form label-width="auto" style="padding: 0px" size="mini">
                <el-form-item
                  class="input-item-class"
                  label="计算项目名称:"
                  prop="name"
                >
                  <span>{{ calProject.name }}</span>
                </el-form-item>
                <el-form-item
                  class="input-item-class"
                  label="计算项目编号:"
                  prop="preId"
                >
                  <span>{{ calProject.preId }}</span>
                </el-form-item>
                <el-form-item
                  class="input-item-class"
                  label="状态:"
                  prop="createUser"
                >
                  <span>{{ calProject.status }}</span>
                </el-form-item>
                <el-form-item
                  class="input-item-class"
                  label="工作流编号:"
                  prop="workflowId"
                >
                  <span>{{ calProject.workflowId }}</span>
                </el-form-item>

                <el-form-item
                  class="input-item-class"
                  label="创建人:"
                  prop="createUser"
                >
                  <span>{{ calProject.createUser }}</span>
                </el-form-item>

                <el-form-item
                  class="input-item-class"
                  label="创建时间:"
                  prop="createTime"
                >
                  <span>{{ calProject.createTime }}</span>
                </el-form-item>

                <el-form-item
                  class="input-item-class"
                  label="描述:"
                  prop="description"
                >
                  <span>{{ calProject.description }}</span>
                </el-form-item>
              </el-form>
            </div>
          </el-card>
        </el-col>
        <!--      计算结果文件-->
        <el-col :span="16" :xs="24">
          <el-card>
            <div slot="header" class="clearfix">
              <span>计算结果文件</span>
            </div>
            <el-row>
              <el-col :span="24" align="right" style="padding: 0 30px">
                <el-button
                  icon="el-icon-data-analysis"
                  type="primary"
                  size="small"
                  @click="drawOptimizationGraph"
                >
                  优化趋势图
                </el-button>
              </el-col>
            </el-row>
            <div>
              <div v-if="calResultData.length == 0" align="center">
                暂无计算结果文件
              </div>
              <collapse-result
                :result-data="calResultData"
                @drawOne="drawOne"
              ></collapse-result>
            </div>
          </el-card>
        </el-col>
      </el-row>
      <!-- 优化趋势图模态框 -->
      <el-dialog
        :close-on-click-modal="false"
        :title="titleMap[dialogStatus]"
        :visible.sync="dialogVisible"
        width="56%"
        @close="handleDialogClose"
      >
        {{ optimizationData }}
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">关闭</el-button>
          <!--          <el-button  type="primary" @click="submitForm">  </el-button>-->
        </span>
      </el-dialog>
    </cus-wraper>
  </div>
</template>

<script>
  import { deleteAction, getAction, postAction, putAction } from '@/api/action'
  // import CollapseResult from "@/views/work-flow/components/CollapseResult";
  import CollapseResult from '@/views/calculate-project/compoents/CollapseResult'
  export default {
    name: 'WFCalResult',
    components: { CollapseResult },
    data() {
      return {
        calProject: {}, //计算项目信息
        calResultData: [], //计算结果文件
        url: {
          calResultList: '/presoftasim/calculate/result/category',
        },
        optimizationData: {}, //结构优化趋势图数据
        titleMap: { optimizationGraph: '优化趋势图' }, //模态框标题
        dialogStatus: 'optimizationGraph', //当前标题
        dialogVisible: false, //是否打开模态框
      }
    },
    created() {
      this.getCalProject()
      this.getCalResult(this.calProject.oid)
    },
    methods: {
      //从跳转地址获取计算项目信息
      getCalProject: function () {
        if (this.$route.query.calProject != null) {
          this.calProject = this.$route.query.calProject
        } else if (this.$route.query.target != null) {
          this.calProject = Object.assign({}, this.$route.query.target)
        } else {
          this.$store.state.tagsView.visitedViews.splice(
            this.$store.state.tagsView.visitedViews.findIndex(
              (item) => item.path === this.$route.path
            ),
            1
          )
          this.$router.push({ path: '/workFlow/schemeDesign', query: {} })
        }
      },
      //获取计算文件
      getCalResult(oid) {
        getAction(this.url.calResultList, { oid: oid }).then((res) => {
          this.calResultData = res.data
        })
      },
      //绘制优化趋势图
      drawOptimizationGraph: function () {
        this.$router.push({
          path: '/calculate-project/StructuralOptimizationCharts',
          query: { currentCal: this.calProject },
        })
      },
      //返回上一页
      goBack: function () {
        this.$store.state.tagsView.visitedViews.splice(
          this.$store.state.tagsView.visitedViews.findIndex(
            (item) => item.path === this.$route.path
          ),
          1
        )
        this.$router.push({
          path: this.$store.state.tagsView.visitedViews[
            this.$store.state.tagsView.visitedViews.length - 1
          ].path,
          query: { target: this.calProject.workflowId },
        })
      },
      //关闭模态框
      handleDialogClose: function () {},
      //绘制当前文件优化趋势图
      drawOne: function (data) {
        this.$router.push({
          path: '/calculate-project/StructuralOptimizationCharts',
          query: { target: 'one', file: data, currentCal: this.calProject },
        })
      },
      //  获取跳转地址参数
      getTarget: function () {
        if (this.$route.query.target != null) {
          this.calProject = Object.assign({}, this.$route.query.target)
        }
      },
    },
  }
</script>

<style scoped></style>
